<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0">
    <!-- <link rel="stylesheet" type="text/css" href="{$_G['URL']['YX2020_CSS']}css/reset.css"> -->

    <script src="https://css2020.yixuan.net/2020css/yx2020/js/jquery.js?v=2"></script>
    <link rel="stylesheet" type="text/css" href="https://css2020.yixuan.net/2020css/yx2020/css/reset.css">
    <link rel="stylesheet" type="text/css" href="https://css2020.yixuan.net/2020css/yx2020/css/swiper.min.css">

    <script src="https://css2020.yixuan.net/2020css/yx2020/js/swiper-3.4.2.min.js"></script>
    <script src="{$_G['URL']['LOTTERY_CSS']}lottery/js/layer/layer.js"></script>
    <script>
        init();
        window.onresize = init;
        function init(){
            document.documentElement.style.fontSize =
                document.documentElement.clientWidth / 7.5 + 'px';
        }
    </script>
    <title>{$theme['title']}</title>
    <style>
        body{
            padding-top: 0.14rem;
            background-color: #f7f7f7;
            padding-bottom: 1.13rem;
        }
        .wrap{
            display: flex;
            flex-direction: column;
            background-color: #ffffff;
            overflow: hidden;
        }
        .wrap .tabs{
            height: 0.9rem;
            line-height: 0.68rem;
            color: #333333;
            font-size: 0.28rem;
            padding: 0 0.8rem;
            display: flex;
            justify-content: space-around;
            align-items: flex-start;
            background: #ffffff;
        }
        .wrap .tabs .active{
            font-size: 0.32rem;
            color: #f4348e;
            font-weight: bold;
            position: relative;
        }
        .wrap .tabs .active::after{
            content: "";
            position: absolute;
            width: 0.34rem;
            height: 0.07rem;
            background: #f91d76;
            bottom: -0.07rem;
            left: 0;
            right: 0;
            margin: auto;
            border-radius: 0.07rem;
        }
        .wrap .content{
            background: #f7f7f7;
            padding: 0.13rem 0.16rem;
            border-top-left-radius: 0.2rem;
            border-top-right-radius: 0.2rem;
        }
        .wrap .content li{
            display: flex;
            justify-content: flex-start;
            padding: 0.14rem 0.11rem;
            background: #ffffff;
            border-radius: 0.16rem;
        }
        .wrap .content img{
            width: 1.89rem;
            height: 1.89rem;
            border-radius: 0.14rem;
        }
        .wrap .content li{
            margin-bottom: 0.12rem;
        }
        .wrap .content li .right{
            color: #999999;
            font-size: 0.24rem;
            padding-left: 0.4rem;
        }
        .wrap .content li .right .tit{
            width: 4.8rem;
            color: #333333;
            font-size: 0.28rem;
            line-height: 0.64rem;
            position: relative;
        }
        .wrap .b_content li .right .tit{
            line-height: 0.5rem;
        }

        .wrap .content li .right .tit:after,.wrap .content li .right .tit:before {
            width: 0;
            height: 0;
            border: 0.1rem solid transparent;
            border-left-color: #ffffff;
            position: absolute;
            content: "";
            right: 0.42rem;
            top: 0;
            bottom: 0;
            margin: auto;
        }
        .wrap .content li .right .tit:before{
            top: 0;
            right: 0.4rem;
            border-left-color: #999999;
        }
        .wrap .content li .right .data{
            display: flex;
            justify-content: flex-start;
            padding-top: 0.16rem;
            line-height: 0.42rem;
        }
        .wrap .content li .right .data .d_left,.wrap .content li .right .data .d_right{
            display: flex;
            flex-direction: column;
        }
        .wrap .content li .right .data .d_left{
            padding-right: 0.3rem;
            position: relative;
        }
        .wrap .content li .right .data .d_left::after{
            content: "";
            position: absolute;
            top: 0;
            bottom: 0;
            right: 0;
            width: 0.01rem;
            min-width: 1px;
            height: 0.56rem;
            margin: auto;
            background: #eeeeee;
        }
        .wrap .content li .right .data .d_right{
            padding-left: 0.3rem;
        }
        .wrap .content li .right .data .d_right .dr_t{
            font-size: 0.28rem;
            color: #f91d76;
        }
        .wrap .content li .right .data .d_right .dr_b{
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .wrap .content li .right .data .d_right .dr_b img{
            width: 0.21rem;
            height: 0.21rem;
            margin-right: 0.07rem;
        }
        .wrap .content li .right .name{
            display: flex;
            justify-content: flex-start;
            align-items: center;
            margin-bottom: 0.1rem;
            margin-top: 0.1rem;
        }
        .wrap .content li .right .name span{
            color: #5086ff;
            background: #ecf5ff;
            line-height: 0.32rem;
            padding: 0 0.08rem;
            font-size: 0.2rem;
            border-radius: 0.06rem;
        }
        .wrap .content li .right .d_txt{
            color: #999999;
            font-size: 0.24rem;
            line-height: 0.38rem;
            position: relative;
        }
        .wrap .content li .right .d_txt span{
            font-size: 0.26rem;
            color: #f91d76;
        }
        .wrap .content li .right .d_txt .btn{
            position: absolute;
            display: block;
            margin-right: 0.2rem;
            border: 0.01rem solid #f91d76;
            padding: 0.08rem 0.14rem;
            border-radius: 0.47rem;
            bottom: 0;
            right: 0;
        }

        .footer{
            position: fixed;
            bottom: 0;
            background: #ffffff;
            width: 7.5rem;
            left: 0;
            right: 0;
            box-shadow: 0 -0.1rem 0.2rem 0 rgba(200,200,200,0.5);
            display: flex;
            justify-content: space-between;
            align-items: center;
            height: 1.13rem;
            z-index: 2;
        }
        .footer .menus{
            display: flex;
            justify-content: space-around;
            align-items: center;
            width: 2.1rem;
            padding-left: 0.16rem;
        }
        .footer .menu1{
            display: flex;
            flex-direction: column;
            align-items: center;
        }
        .footer .menu1 img{
            width: 0.32rem;
            height: 0.37rem;
        }
        .footer .menu1 span{
            font-size: 0.22rem;
            color: #999999;
            padding-top: 0.09rem;
        }
        .footer .menu2 img{
            width: 0.33rem;
            height: 0.36rem;
        }
        .footer .menu2{
            display: flex;
            flex-direction: column;
            align-items: center;
        }
        .footer .menu2 span{
            font-size: 0.22rem;
            color: #999999;
            padding-top: 0.09rem;
        }
        .footer .button{
            width: 4.69rem;
            height: 0.86rem;
            background:linear-gradient(to right,#f82079,#fe878e);
            color: #ffffff;
            font-size: 0.28rem;
            display: flex;
            justify-content: center;
            align-items: center;
            margin-right: 0.26rem;
            border-radius: 0.2rem;
        }
        .footer .btns{
            width: 4.69rem;
            height: 0.86rem;
            color: #ffffff;
            font-size: 0.28rem;
            display: flex;
            justify-content: space-around;
            border-radius: 0.2rem;
            overflow: hidden;
            margin-right: 0.26rem;
        }
        .footer .btns span{
            flex-grow:1;
            height: 0.86rem;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .footer .btns span:nth-child(1){
            background:linear-gradient(to right,#fba384,#fd888e);
        }
        .footer .btns span:nth-child(2){
            background:linear-gradient(to right,#f82079,#fe878e);
        }
        .footer .button.over{
            background: #f3f3f3;
            color: #999999;
        }
        .footer .button img{
            width: 0.3rem;
            height: 0.3rem;
            margin-right: 0.12rem;
        }
    </style>
</head>
<body>
<div class="wrap">
    <ul class="tabs" id="tabs">
        <li class="active">全部奖励</li>
        <li>我的奖励</li>
    </ul>

<!--    全部奖励-->
    <ul class="content b_content" >
        {loop $temp_total_arr $item}
        {if $item['user_has']}
        <li onclick="showService()">
        {else}
        <li onclick="showTips('{$item['invite_desc']}')">
        {/if}
            <img src="{$item['img']}" alt="">
            <div class="right">
                <div class="tit">{$item['title']}</div>
                <div class="name">
                    <span>{$item['shangjia']}</span>
                </div>
                <div class="d_txt">{$item['from']}</div>
                <div class="d_txt"><span>{$item['bl_txt']}</span><span class="btn">{$item['br_txt']}</span></div>
            </div>
        </li>
        {/loop}
    </ul>
    <!--    我的奖励-->
    <ul class="content b_content" style="display: none;">
        {loop $temp_total_arr $item}
        {if $item['user_has']}
        <li onclick="showVerify()">
            <img src="{$item['img']}" alt="">
            <div class="right">
                <div class="tit">{$item['title']}</div>
                <div class="name">
                    <span>{$item['shangjia']}</span>
                </div>
                <div class="d_txt">{$item['from']}</div>
                <div class="d_txt"><span>{$item['bl_txt']}</span><span class="btn">{$item['br_txt']}</span></div>
            </div>
        </li>
        {/if}
        {/loop}
    </ul>
    <div class="footer">
        <div class="menus">
            <a class="menu1" href="/{php echo createMobileUrl('index', array('themeid'=>$themeid));}">
                <img src="{$_G['URL']['BEILAI_IMG']}/home.png">
                <span>首页</span>
            </a>
            <div class="menu2" onclick="showService()">
                <img src="{$_G['URL']['BEILAI_IMG']}/b_icon2.png">
                <span>客服</span>
            </div>
        </div>
        <!-- <div class="button over">
            <img src="{$_G['URL']['BEILAI_IMG']}/imoj.png">
            <span>活动已结束</span>
        </div> -->
        {if $poster_info['img_url']}
        <div class="button" onclick="showPoster()">
            <span>领取我的活动海报</span>
        </div>
        {else}
        <div class="button" >
            <span>{$poster_info['tips']}</span>
        </div>
        {/if}
        <!-- <div class="btns">
            <span>立即参与二</span>
            <span>立即参与</span>
        </div> -->
    </div>
    
</div>


<div class="service" id="my_verify_div" style="display: none;">
    <div class="content">
        <div class="head">
            <span>核销码</span>
            <img class="close" src="{$_G['URL']['BEILAI_IMG']}/close.png" onclick="hideService()"/>
        </div>
        <div class="body">
            <div class="qrcode">
                <img src="{$verify_code}" class="code_img">
                <span class="txt">请截图保存核销二维码后，点击添加客服</span>
            </div>
            <div class="user" onclick="showService()" style="justify-content: center!important;">
                <div class="left" style="justify-content: center">
<!--                    <img class="icon" src="{$_G['URL']['BEILAI_IMG']}/b_icon2.png"/>-->
                    <div class="name">
                        <span class="txt" style="text-align: center">点击添加客服</span>
<!--                        <div class="tel">-->
<!--                            <img class="tel_img" src="{$_G['URL']['BEILAI_IMG']}/tel.png">-->
<!--                            <span>{$kefu['mobile']}</span>-->
<!--                        </div>-->
                    </div>
                </div>
<!--                <img class="phone" src="{$_G['URL']['BEILAI_IMG']}/phone.png">-->
            </div>
        </div>
    </div>
</div>
{include file='beilai/poster'}
</body>
<script>
let themyrecord_status = "{php echo $themyrecord_status;}"
$("#tabs li").click(function(){
    $("#tabs li").removeClass("active");
    $(this).addClass("active");
    $(".b_content").hide();
    $(".b_content").eq($(this).index()).show();
});
function showVerify() {
    if (themyrecord_status==1){
        $("#my_verify_div").show();
    }
}
function showTips(msg) {
    layer.msg(msg);
}
</script>
</html>